<template>
    <div class="img-view">
        <a-modal style="width: 800px;" v-model:open="state.open" :title="state.proj.projectName" :closable="false">
            <div class="image mb-2 cursor-pointer">
                <img :src="state.proj.coverImg ? `/${state.proj.coverImg}` : notFoundImg" />
            </div>
            <template #footer>
                <div class="w-full flex justify-between items-center">
                    <div class="update-time">
                        最后编辑时间：{{state.proj.updateTime}}
                    </div>
                    <div class="flex justify-between items-center">
                        <div class="tag flex items-center">
                            <template v-if="state.proj.isPublish == 1" >
                                <span class="block w-2 h-2 rounded mr-1" style="background-color: #34c749;"></span>已发布
                            </template>
                            <template v-else>
                                <span  class="block w-2 h-2 rounded mr-1" style="background-color: red;"></span>未发布
                            </template>
                        </div>
                        <a-button class="ml-2" shape="circle" :icon="h(ToolOutlined)" @click="editDetail(state.proj)"/>
                    </div>
                </div>
            </template>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { h, reactive } from 'vue';
import type { DataItemType } from '../types';
import { ToolOutlined } from '@ant-design/icons-vue';
import notFoundImg from '@/assets/images/image-404.png'
import { useRouter } from 'vue-router';

const router = useRouter()
const state = reactive({
    open: false,
    proj:{} as DataItemType
})

const handleOk = () => {
    state.open = false
}

const handleOpen = (val: DataItemType) => {
    state.open = true
    state.proj = val
    
}

const handleCancel = () => {
    state.open = false
}
const editDetail = (item:any)=>{
    router.push({
        path:`/design/${item.id}`,
    })
}
defineExpose({
    handleOpen,
})
</script>